<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>2-1-2-Code</title>
	<link href="lib/lib/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>


<div class="container">

<h4>
	<table class="table table-bordered">
		<thead>
			<tr class="avtive">
				<th>标题1</th>
				<th>标题2</th>
			</tr>
		</thead>

		<tbody>
			<tr class="success">
				<td>基本表格</td>
				<td>table</td>
			</tr>
			<tr  class="info">
				<td> 斑马线表格 </td>
				<td> table-striped </td>
			</tr>
			<tr class="warning">
				<td> 紧凑型表格 </td>
				<td> table-condensed </td>
			</tr>
			<tr class="danger">
				<td> hover效果 </td>
				<td>  table-hover </td>
			</tr>
			<tr>
				<td> 添加表格边框 </td>
				<td>  table-bordered </td>
			</tr>
		</tbody>
	</table>
</h4>
<br><br>



<!-- 基本形状表格 -->
		<table class="table  table-condensed table-hover table-bordered">
			<thead>
				<tr>
					<th>标题表格</th>
					<th>标题表格</th>
					<th>标题表格</th>
				</tr>
			</thead>

			<tbody>
				<tr>
					<td>表格内容</td>
					<td>表格内容</td>
					<td>表格内容</td>
				</tr>
				
								<tr>
					<td>表格内容</td>
					<td>表格内容</td>
					<td>表格内容</td>
				</tr>
				
				<tr>
					<td>表格内容</td>
					<td>表格内容</td>
					<td>表格内容</td>
				</tr>
			</tbody>
		</table>

	</div>

<br><hr>
	
	

<h3 style="text-align: center;">table-responsive响应式形成滚动条方便观看</h3>
<div class="table-responsive">
			<table class="table table-bordered">
				<thead>
					<tr class="avtive">
						<th>标题1  填充文字  填充文字</th>
						<th>标题2  填充文字  填充文字</th>
						<th>标题2  填充文字  填充文字</th>
					</tr>
				</thead>

				<tbody>
					<tr class="success">
						<td>基本表格  填充文字  填充文字</td>
						<td>table  填充文字  填充文字</td>
						<td>table  填充文字  填充文字</td>
					</tr>
					<tr  class="info">
						<td> 斑马线表格  填充文字  填充文字 </td>
						<td> table-striped  填充文字  填充文字 </td>
						<td> table-striped  填充文字  填充文字 </td>
					</tr>
					<tr class="warning">
						<td> 紧凑型表格  填充文字  填充文字 </td>
						<td> table-condensed   填充文字  填充文字</td>
						<td> table-condensed   填充文字  填充文字</td>
					</tr>
					<tr class="danger">
						<td> hover效果   填充文字  填充文字</td>
						<td>  table-hover   填充文字  填充文字</td>
						<td>  table-hover   填充文字  填充文字</td>
					</tr>
					<tr>
						<td> 添加表格边框   填充文字  填充文字</td>
						<td> 添加表格边框   填充文字  填充文字</td>
						<td>  table-bordered   填充文字</td>
					</tr>
				</tbody>
			</table>
	</div>











<br><br><br><br><br>
<!-- 引入本地文件 bootstrap基于JQ上运行，需加载JQ文件-->
<script src="lib/jquery/jquery-1.11.0.min.js"></script>
<script src="lib/lib/js/bootstrap.min.js"></script>
	
</body>
</html>